<template lang="pug">
  el-drawer.commonDrawer(
    title="巡检对象设置"
    :visible="visibleDialog"
    append-to-body
    center
    destroy-on-close
    direction="rtl"
    size="640px"
    @close="$_handleCancel"
  )
    .drawer-content
      form-box.basicForm(
        ref="basicForm"
        :fields="basicField"
        :showBtns="false"
        labelWidth="140px"
        :layoutCol="{ xs: 24, md: 24, lg: 24 }"
      )
    .drawer-footer.tr
      el-button.gradientVertical(size="large" :loading="submitting" @click="submitHandle" round) 确定
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
import { submitApi, targetSubmit } from '../api'
import omit from 'lodash/omit'

export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    id: {
      type: [Number, String],
      default: ''
    },
    pageType: {
      type: String,
      default: ''
    },
    info: {
      type: Object,
      default: () => ({})
    },
    operateType: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      loading: false,
      submitting: false
    }
  },
  computed: {
    ...mapGetters(['dict', 'user']),
    visibleDialog: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', val)
      }
    },
    targetField () {
      const { info } = this
      return [
        {
          label: '检查对象类别',
          key: 'type',
          type: 'select',
          rules: [{ required: true, message: '请输入' }],
          initialValue: info.type,
          fieldProps: {
            style: { width: '70%' },
            dictKey: 'xj_target_type',
            // helpHtml: '添加',
            props: { label: 'label', value: 'val' },
            helpHandle: () => this.addModal('xj_target_type')
          }
        },
        {
          label: '检查对象',
          key: 'name',
          rules: [{ required: true, message: '请输入' }],
          initialValue: info.name
        }
      ]
    },
    typeField () {
      const { info, id } = this
      let disabled = false
      if (id !== '') {
        disabled = true
      }
      const list = [
        {
          label: '类别名称',
          key: 'typeName',
          rules: [{ required: true, message: '请输入' }],
          initialValue: info.typeName,
          fieldProps: {
            disabled: disabled
          }
        },
        {
          label: '检查分类',
          key: 'sort',
          type: 'select',
          rules: [{ required: true, message: '请输入' }],
          initialValue: info.sort,
          fieldProps: {
            props: { label: 'label', value: 'val' },
            dictKey: 'xj_sort',
            disabled: disabled
          }
        },
        {
          label: '结论类别',
          key: 'conclusionType',
          type: 'select',
          rules: [{ required: true, message: '请选择' }],
          initialValue: info.conclusionType,
          fieldProps: {
            props: { label: 'val', value: 'val' },
            dictKey: 'xj_conclusion_type',
            disabled: disabled
          }
        },
        {
          label: '对象类别',
          key: 'targetType',
          type: 'select',
          rules: [{ required: true, message: '请选择' }],
          initialValue: info.targetType,
          fieldProps: {
            props: { label: 'val', value: 'val' },
            dictKey: 'xj_target_type',
            disabled: disabled
          }
        },
        // {
        //   label: '记录方式',
        //   key: 'recordType',
        //   type: 'select',
        //   rules: [{ required: true, message: '请选择' }],
        //   initialValue: info.recordType,
        //   fieldProps: {
        //     props: { label: 'val', value: 'val' },
        //     dictKey: 'xj_record_type'
        //   }
        // },
        {
          label: '巡检周期',
          key: 'cycle',
          type: 'select',
          rules: [{ required: true, message: '请选择' }],
          initialValue: info.cycle,
          fieldProps: {
            props: { label: 'label', value: 'val' },
            dictKey: 'xj_cycle',
            disabled: disabled
          }
        },
        {
          label: '允许部分提交',
          key: 'whole',
          type: 'select',
          rules: [{ required: true, message: '请选择' }],
          initialValue: info.cycle,
          fieldProps: {
            props: { label: 'label', value: 'value' },
            options: [
              { label: '是', value: '0' },
              { label: '否', value: '1' }
            ],
            disabled: disabled
          }
        }
      ]
      if (this.user.isGroupAdmin) {
        list.push({
          label: '是否集团公用',
          key: 'isGroup',
          type: 'switch',
          rules: [{ required: true, message: '请选择' }],
          initialValue: info.areaId === '0'
        })
      }
      return list
    },
    basicField () {
      const { pageType } = this
      return pageType === 'target' ? this.targetField : this.typeField
    }
  },
  methods: {
    ...mapActions({
      'getDict': 'dict/getDict',
      'setDict': 'dict/setDict'
    }),
    // 新增类型
    addModal (type) {
      const that = this
      const { dict } = this
      this.$prompt(`请输入${type === 'xj_target_type' ? '对象类别' : '检查对象'}名称`, `添加${type === 'xj_target_type' ? '对象类别' : '检查对象'}`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        console.log(value, dict[type])
        if (!dict[type].find(x => x.value === value)) {
          that.setDict({ type, list: { val: value, label: value }})
        }
      })
    },
    async submitHandle () {
      const { pageType } = this
      const values = await this.$refs.basicForm.submitForm()
      const { isGroup } = values
      console.log(values)
      this.submitting = true
      const fn = pageType === 'target' ? targetSubmit : submitApi
      let params = {
        ...values,
        id: this.id
      }
      if (this.user.isGroupAdmin) {
        params = {
          ...omit(values, ['isGroup']),
          isGroup: isGroup ? 1 : 0,
          id: this.id
        }
      }
      fn(params).then(() => {
        this.$message.success('提交成功')
        this.$emit('getList')
        this.$_handleCancel()
      }).finally(() => {
        this.submitting = false
      })
    },
    $_handleCancel () {
      this.visibleDialog = false
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
